<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="68px">
      <el-form-item label="项目名称" prop="typeId">
        <el-input
            v-model="queryParams.projectName"
            placeholder="请输入项目名称"
            clearable
            @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="合同名称" prop="typeName">
        <el-input
            v-model="queryParams.contractName"
            placeholder="请输入合同名称"
            clearable
            @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="合同签订日期" label-width="150">
        <el-date-picker
            v-model="date"
            type="daterange"
            range-separator="To"
            start-placeholder="Start date"
            end-placeholder="End date"
            size="default"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
            type="primary"
            plain
            icon="Plus"
            @click="handleAdd"
        >新增</el-button>
      </el-col>
      <right-toolbar  @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table :data="contractList">
      <el-table-column label="序号" type="index" align="center" width="60"/>
      <el-table-column label="合同名称" width="300" align="center" prop="contractName"/>
      <el-table-column label="合同编号" width="300" align="center" prop="contractCode"/>
      <el-table-column label="项目归属" width="200" align="center" prop="projectOwner"/>
      <el-table-column label="项目负责人" width="150" align="center" prop="projectLeader"/>
      <el-table-column label="合同金额(元)" width="180" align="center" prop="projectLeader">
        <template #default="scope">
          {{scope.row.totalAmount/10000}}
        </template>
      </el-table-column>
      <el-table-column label="合同履行期限" width="200" prop="projectLeader">
        <template #default="scope">
          <span>{{parseTime(scope.row.startDate, '{y}-{m}-{d}')}}至{{parseTime(scope.row.finishDate, '{y}-{m}-{d}')}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button link type="primary" icon="Edit" @click="look(scope.row.projectId)" >查看</el-button><br>
          <el-button link type="primary" icon="RefreshLeft" @click="change(scope.row.projectId)" >变更合同</el-button><br>
          <el-button link type="primary" icon="Delete" @click="remove(scope.row.projectId)" >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
        v-show="total>0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
    />
    <!--  添加合同步骤一  -->
    <el-dialog v-model="openadd1" width="1000px" append-to-body :close-on-click-modal="false" style=" border-radius: 20px;" class="larger-input">
      <el-form ref="addFormRef" :model="addForm" :rules="af1Rules">
        <el-row :gutter="15" style="display: flex;margin-left: 10px;">
          <el-col :span="12">
            <el-form-item label="合同编号" prop="contractCode" style="margin-left: 30px;">
              <el-input v-model="addForm.contractCode" placeholder="请输入合同编号"  style="width: 290px;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" >
            <el-form-item label="合同名称" prop="contractName" style="margin-left: 22px;">
              <el-input v-model="addForm.contractName" placeholder="请输入合同名称" style="width: 300px;"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15" style="display: flex;margin-left: 0px;">
          <el-col :span="12">
            <el-form-item label="签订日期" prop="signingTime" style="margin-left: 40px;">
              <el-date-picker clearable
                              v-model="addForm.signingTime"
                              type="date"
                              value-format="YYYY-MM-DD"
                              placeholder="请选择签订日期"
                              style="width: 290px;height: 38px">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="签订地址" prop="signingLocation" style="margin-left: 38px;">
              <el-input v-model="addForm.signingLocation" placeholder="请输入签订地址" style="width: 300px;"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item label="履约开始日期" prop="startDate" style="margin-left: 17px;">
              <el-date-picker clearable
                              v-model="addForm.startDate"
                              type="date"
                              value-format="YYYY-MM-DD"
                              placeholder="请选择履约开始日期"
                              style="width: 290px;height: 38px">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="履约结束日期" prop="finishDate">
              <el-date-picker clearable
                              v-model="addForm.finishDate"
                              type="date"
                              value-format="YYYY-MM-DD"
                              placeholder="请选择履约结束日期" style="width: 300px;height: 38px">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item label="合同金额" prop="totalAmount" style="margin-left: 48px;">
              <el-input v-model="addForm.totalAmount" placeholder="请输入合同金额" style="width: 290px;"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="剩余合同份数" prop="contractNumber">
              <el-input v-model="addForm.contractNumber" placeholder="请输入剩余合同份数" style="width: 300px;"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="6">
            <el-form-item label="是否需要专利" prop="patent">
              <el-radio-group v-model="addForm.patent" >
                <el-radio :value="1" :label="1" size="large">是</el-radio>
                <el-radio :value="0" :label="0" size="large">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item v-if="addForm.patent==1" label="专利数" prop="patent">
              <el-input v-model="addForm.patentAmount" placeholder="请输入专利数"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="专利详情要求" prop="patentRequirement">
              <el-input v-model="addForm.patentRequirement" :disabled="addForm.patent==0" placeholder="请输入专利详情要求"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="6">
            <el-form-item label="是否需要文章" prop="article">
              <el-radio-group v-model="addForm.article" >
                <el-radio :value="1" :label="1" size="large">是</el-radio>
                <el-radio :value="0" :label="0" size="large">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item v-if="addForm.article==1" label="文章数" prop="patent">
              <el-input v-model="addForm.articleAmount"  placeholder="请输入文章数"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="文章详情要求" prop="articleRequirement">
              <el-input v-model="addForm.articleRequirement" :disabled="addForm.article==0" placeholder="请输入文章详情要求"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item label="是否提交给科研办" prop="scientificOffice">
              <el-radio-group v-model="addForm.scientificOffice" >
                <el-radio :value="1" :label="1" size="large">是</el-radio>
                <el-radio :value="0" :label="0" size="large">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="提交时间" prop="scientificOfficeDate">
              <el-date-picker clearable
                              v-model="addForm.scientificOfficeDate"
                              type="date"
                              :disabled="addForm.scientificOffice==0"
                              value-format="YYYY-MM-DD"
                              placeholder="请选择提交时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item label="是否提交给院办" prop="instituteOffice">
              <el-radio-group v-model="addForm.instituteOffice" >
                <el-radio :value="1" :label="1" size="large">是</el-radio>
                <el-radio :value="0" :label="0" size="large">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="提交时间" prop="instituteOfficeDate">
              <el-date-picker clearable
                              v-model="addForm.instituteOfficeDate"
                              type="date"
                              :disabled="addForm.instituteOffice==0"
                              value-format="YYYY-MM-DD"
                              placeholder="请选择提交时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item label="科技合同是否需要登记" prop="record">
              <el-radio-group v-model="addForm.record" >
                <el-radio :value="1" :label="1" size="large">是</el-radio>
                <el-radio :value="0" :label="0" size="large">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
          </el-col>
        </el-row>
        <el-form-item label="合同主要内容" prop="contractContent">
          <el-input v-model="addForm.contractContent" placeholder="请输入合同主要内容" type="textarea" :rows="4"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="toStep2(addFormRef)">下一步</el-button>
          <el-button @click="cancelAddForm1">取 消</el-button>
        </div>
      </template>
    </el-dialog>
    <!--  添加合同步骤二  -->
    <el-dialog v-model="openadd2" width="1000px" append-to-body :close-on-click-modal="false" class="custom-dialog larger-input" style=" border-radius: 20px;" >
      <el-form ref="addFormRef" :model="addForm" :rules="af2Rules">
        <el-row :gutter="15">
          <el-col :span="16">
            <el-form-item label="甲方" prop="partA" style="margin-left: 30px;">
              <el-input v-model="addForm.partA" placeholder="请输入甲方" style="width:800px"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item label="法定代表人" prop="aLegal">
              <el-input v-model="addForm.alegal" placeholder="请输入甲方法定代表人" style="margin-left: -10px;width: 500px"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="电话" prop="aPhone">
              <el-input v-model="addForm.aphone" placeholder="请输入甲方电话"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item label="地址" prop="aLocation" style="margin-left: 40px;">
              <el-input v-model="addForm.alocation" placeholder="请输入甲方地址"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮箱" prop="aEmail">
              <el-input v-model="addForm.aemail" placeholder="请输入甲方邮箱"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="16">
            <el-form-item label="乙方" prop="partB" style="margin-left: 30px;">
              <el-input v-model="addForm.partB" placeholder="请输入乙方" style="width: 800px;"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item label="法定代表人" prop="bLegal">
              <el-input v-model="addForm.blegal" placeholder="请输入乙方法定代表人" style="margin-left: -10px;width: 500px"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="电话" prop="bPhone">
              <el-input v-model="addForm.bphone" placeholder="请输入乙方电话"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item label="地址" prop="bLocation" style="margin-left: 40px;">
              <el-input v-model="addForm.blocation" placeholder="请输入乙方地址"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮箱" prop="bEmail">
              <el-input v-model="addForm.bemail" placeholder="请输入乙方邮箱"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="toStep3(addFormRef)">下一步</el-button>
          <el-button @click="cancelAddForm2">取 消</el-button>
        </div>
      </template>
    </el-dialog>
    <!--  添加合同步骤三  -->
    <el-dialog v-model="openadd3" width="1000px" append-to-body :close-on-click-modal="false"  style=" border-radius: 20px;" class="larger-input">
      <el-form ref="addFormRef" :model="addForm" :rules="af3Rules">
        <el-row :gutter="15">
          <el-col :span="16">
            <el-form-item label="收款账户名称" prop="payeeAccount">
              <el-input v-model="addForm.payeeAccount" placeholder="请输入收款账户名称" style="margin-left: -5px;width:500px;"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
          </el-col>
        </el-row>
        <el-row :gutter="15" style="display: flex;margin-left: 20px;">
          <el-col :span="12">
            <el-form-item label="开户银行" prop="openingBank">
              <el-input v-model="addForm.openingBank" placeholder="请输入开户银行"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="银行账号" prop="bankAccount">
              <el-input v-model="addForm.bankAccount" placeholder="请输入银行账号"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15" style="display: flex;margin-left: 20px;">
          <el-col :span="12">
            <el-form-item label="合同文件" prop="contractDocuments">
              <el-upload
                  v-model:file-list="f1"
                  :action='baseurl+"/common/upload"'
                  multiple
                  :limit="1"
                  :on-success="upload1"
              >
                <el-button type="primary">上传</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="补充合同文件" prop="supplementaryDocuments">
              <el-upload
                  v-model:file-list="f2"
                  :action='baseurl+"/common/upload"'
                  multiple
                  :limit="1"
                  :on-success="upload2"
              >
                <el-button type="primary">上传</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <br>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="toStep4(addFormRef)">下一步</el-button>
          <el-button @click="cancelAddForm3">取 消</el-button>
        </div>
      </template>
    </el-dialog>
    <!--  添加合同步骤四  -->
    <el-dialog v-model="openadd4" width="1000px" append-to-body :close-on-click-modal="false"  style=" border-radius: 20px;" class="larger-input">
      <el-form-item label="里程碑信息">
        <el-row>
          <el-col :span="2">
            <el-button
                type="primary"
                plain
                icon="Plus"
                @click="handleAdd2"
            >新增</el-button>
          </el-col>
        </el-row>
        <el-table :data="lcbList">
          <el-table-column label="里程碑" prop="event"/>
          <el-table-column label="里程碑时间" prop="date"/>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template #default="scope">
              <el-button link type="primary" icon="Edit" @click="handleUpdate2(scope.row.id)">修改</el-button>
              <el-button link type="primary" icon="Delete" @click="handleDelete2(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
            v-show="total2>0"
            :total="total2"
            v-model:page="queryParamslcb.pageNum"
            v-model:limit="queryParamslcb.pageSize"
            @pagination="getLCBList"
        />
      </el-form-item>
      <el-form-item label="合同支付计划">
        <el-row>
          <el-col :span="2">
            <el-button
                type="primary"
                plain
                icon="Plus"
                @click="handleAdd3"
            >新增</el-button>
          </el-col>
        </el-row>
        <el-table :data="zfList">
          <el-table-column label="期数" type="index" width="120"/>
          <el-table-column label="计划支付日期" prop="paymentDate"/>
          <el-table-column label="计划支付金额" prop="paymentPrice">
            <template #default="scope">
              {{scope.row.paymentPrice/100}}
            </template>
          </el-table-column>
          <el-table-column label="支付比例">
            <template #default="scope">
              {{(scope.row.paymentPrice/addForm.totalAmount*10000).toFixed(2)}}%
            </template>
          </el-table-column>
<!--          <el-table-column label="收款人" prop="payee"/>-->
<!--          <el-table-column label="收款条件" prop="paymentTerms"/>-->
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template #default="scope">
              <el-button link type="primary" icon="Edit" @click="handleUpdate3(scope.row.paymentId)" >修改</el-button>
              <el-button link type="primary" icon="Delete" @click="handleDelete3(scope.row.paymentId)" >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
            v-show="total3>0"
            :total="total3"
            v-model:page="queryParamszf.pageNum"
            v-model:limit="queryParamszf.pageSize"
            @pagination="getZFList"
        />
      </el-form-item>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submit()">提交</el-button>
          <el-button @click="cancelAddForm4">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog v-model="openLcb" width="500px" append-to-body :close-on-click-modal="false" style=" border-radius: 20px;" class="larger-input">
      <el-form :model="lcbForm">
        <el-form-item label="里程碑" prop="event">
          <el-input v-model="lcbForm.event" placeholder="请输入里程碑事件"/>
        </el-form-item>
        <el-form-item label="时间" prop="date" style="margin-left: 18px">
          <el-date-picker clearable
                          v-model="lcbForm.date"
                          type="date"
                          value-format="YYYY-MM-DD"
                          placeholder="请选择签订日期" style="width: 500px;height: 38px">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submit2()">完成</el-button>
          <el-button @click="cancelLcb">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog v-model="openZf" width="600px" append-to-body :close-on-click-modal="false" style=" border-radius: 20px;" class="larger-input">
      <el-form :model="zfForm">
        <el-form-item label="计划支付日期" prop="event">
          <el-date-picker clearable
                          v-model="zfForm.paymentDate"
                          type="date"
                          value-format="YYYY-MM-DD"
                          placeholder="请选择计划支付日期" style="width: 800px;">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="计划支付比例 " >
          <el-input v-model="paymentRatio" placeholder="请输入支付比例" style="width: 420px"/><span style="font-size: 23px;margin-left: 5px">%</span>
        </el-form-item>
        <el-form-item label="计划支付金额 " >
          <el-input v-model="zfForm.paymentPrice" placeholder="请输入支付金额" disabled/>
        </el-form-item>
<!--        <el-form-item label="收款人" prop="payee">-->
<!--          <el-input v-model="zfForm.payee" placeholder="请输入收款人"/>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="收款条件" prop="paymentTerms">-->
<!--          <el-input v-model="zfForm.paymentTerms" placeholder="请输入收款条件"/>-->
<!--        </el-form-item>-->
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submit3()">提交</el-button>
          <el-button @click="cancelZf">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!--  合同详情查看  -->
    <el-dialog v-model="openView" width="900px" append-to-body :close-on-click-modal="false"  style=" border-radius: 20px;padding-left: 20px;" class="larger-input">
      <div style="display: flex; align-items: center;">
        <div class="blue-bar"></div>
        <div class="custom-title">合同基本信息：</div>
      </div>
      <el-row :gutter="10" style="display: flex;margin-left: 60px;">
        <el-col :span="12" style="display: flex; align-items: center;">
          <span style="margin-right: 10px;white-space: nowrap;">合同编号：</span>
          <el-input
              v-model="contractDetail.contractCode"
              disabled
              style="width: 70%;;"></el-input>
        </el-col>
        <el-col :span="12"  style="display: flex; align-items: center;">
          <span style="margin-right: 10px; white-space: nowrap;">合同名称：</span>
          <el-input
              v-model="contractDetail.contractName"
              disabled
              style="width: 69.8%;"></el-input>
        </el-col>
      </el-row>
      <br>
      <el-row :gutter="10" style="display: flex;margin-left: 60px;">
        <el-col :span="12" style="display: flex; align-items: center;">
          <span>签订日期：</span>
          <el-input v-model="contractDetail.signingTime" placeholder="选择日期" disabled style="width: 70%; margin-left: 10px;"></el-input>
        </el-col>
        <el-col :span="12" style="display: flex; align-items: center;">
          <span>签订地址：</span>
          <el-input v-model="contractDetail.signingLocation" disabled style="width: 70%; margin-left: 10px;"></el-input>
        </el-col>
      </el-row>
      <br>
      <el-row :gutter="10" style="display: flex;margin-left: 30px;">
        <el-col :span="12" style="display: flex; align-items: center;">
          <span>履约开始日期：</span>
          <el-input v-model="contractDetail.startDate" placeholder="选择开始日期" disabled style="width: 67.5%; margin-left: 10px;"></el-input>
        </el-col>
        <el-col :span="12" style="display: flex; align-items: center; margin-left: -15px;">
          <span >履约结束日期：</span>
          <el-input v-model="contractDetail.finishDate" placeholder="选择结束日期" disabled style="width: 67.3%; margin-left: 10px;"></el-input>
        </el-col>
      </el-row>
      <br>
      <el-row :gutter="10" style="display: flex;margin-left:59px;">
        <el-col :span="12" style="display: flex; align-items: center;">
          <span style="margin-right:5px;">合同金额：</span>
          <el-input v-model="contractDetail.realTotalAmount" disabled style="width: 70%; margin-left: 6px;"></el-input>
        </el-col>
        <el-col :span="12" style="display: flex; align-items: center;">
          <span style="margin-right: 0px;">所属项目：</span>
          <el-input v-model="contractDetail.projectName" disabled style="width: 70%; margin-left: 11px;"></el-input>
        </el-col>
      </el-row>
      <br>
      <el-row :gutter="10" style="display: flex;margin-left: 30px;">
        <el-col :span="12" style="display: flex; align-items: center;">
          <span style="margin-right: 20px;">剩余合同份数：</span>
          <el-input v-model="contractDetail.contractNumber" disabled style="width: 68%; margin-left: -11px;"></el-input>
        </el-col>
        <el-col :span="12" style="display: flex; align-items: center;">
          <span style="text-indent: 15px;">项目归属：</span>
          <el-input v-model="contractDetail.projectOwner" disabled style="width: 67.5%; margin-left: 10px;"></el-input>
        </el-col>
      </el-row>
      <br>
      <el-row :gutter="10" style="display: flex;margin-left: 30px;">
        <el-col :span="12">
          <span>是否需要专利：</span>
          <el-radio-group v-model="contractDetail.patent" style="padding-left: 20px">
            <el-radio :value="1" :label="1" size="large" :disabled="true">是</el-radio>
            <el-radio :value="0" :label="0" size="large" :disabled="true">否</el-radio>
          </el-radio-group>
        </el-col>
        <el-col :span="12" style="display: flex; align-items: center;">
          <span style="text-indent: 15px;">专利要求：</span>
          <el-input v-model="contractDetail.patentRequirement" disabled style="width: 67.5%; margin-left: 10px;"></el-input>
        </el-col>
      </el-row>
      <br>
      <el-row :gutter="10" style="display: flex;margin-left: 30px;">
        <el-col :span="12" style="display: flex; align-items: center;">
          <span>是否需要文章：</span>
          <el-radio-group v-model="contractDetail.article" style="padding-left: 20px">
            <el-radio :value="1" :label="1" size="large" :disabled="true">是</el-radio>
            <el-radio :value="0" :label="0" size="large" :disabled="true">否</el-radio>
          </el-radio-group>
        </el-col>
        <el-col :span="12" style="display: flex; align-items: center;">
          <span style="text-indent: 15px;">文章要求：</span>
          <el-input v-model="contractDetail.articleRequirement" disabled style="width: 67.5%; margin-left: 10px;"></el-input>
        </el-col>
      </el-row>
      <br>
      <el-row :gutter="10" style="display: flex;margin-left: 0px;">
        <el-col :span="12" style="display: flex; align-items: center;">
          <span>是否提交给科研办：</span>
          <el-radio-group v-model="contractDetail.scientificOffice" style="padding-left: 20px">
            <el-radio :value="1" :label="1" size="large" :disabled="true">是</el-radio>
            <el-radio :value="0" :label="0" size="large" :disabled="true">否</el-radio>
          </el-radio-group>
        </el-col>
        <el-col :span="12" style="display: flex; align-items: center;">
          <span style="text-indent: 30px;">提交时间：</span>
          <el-input v-model="contractDetail.scientificOfficeDate" placeholder="选择时间" disabled style="width: 65.3%; margin-left: 10px;"></el-input>
        </el-col>
      </el-row>
      <br>
      <el-row :gutter="10" style="display: flex;margin-left: 15px;">
        <el-col :span="12" style="display: flex; align-items: center;">
          <span>是否提交给院办：</span>
          <el-radio-group v-model="contractDetail.instituteOffice" style="padding-left: 20px">
            <el-radio :label="1" size="large" :disabled="true">是</el-radio>
            <el-radio :label="0" size="large" :disabled="true">否</el-radio>
          </el-radio-group>
        </el-col>
        <el-col :span="12" style="display: flex; align-items: center;">
          <span style="text-indent: 23px;">提交时间：</span>
          <el-date-picker
              v-model="contractDetail.instituteOfficeDate"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
              style="width: 67%; margin-left: 8px;height: 38px"
              disabled
          ></el-date-picker>
        </el-col>
      </el-row>
      <br>
      <el-row :gutter="10" style="display: flex;margin-left: -28px;">
        <el-col :span="12">
          <span>科技合同是否需要登记：</span>
          <el-radio-group v-model="contractDetail.record" style="padding-left: 20px">
            <el-radio :value="1" :label="1" size="large" :disabled="true">是</el-radio>
            <el-radio :value="0" :label="0" size="large" :disabled="true">否</el-radio>
          </el-radio-group>
        </el-col>
        <el-col :span="12">
        </el-col>
      </el-row>
      <br>
      <el-row :gutter="10" style="display: flex;margin-left: 30px;">
        <el-col :span="24">
          <span>合同主要内容：</span>
          <el-input
              v-model="contractDetail.contractContent"
              type="textarea"
              :rows="4"
              placeholder="合同内容介绍"
              :readonly="!contractDetail.contractContent"
              style="width: 98%; margin-top: 5px;font-size: 16px"
          >
            <template v-if="!contractDetail.contractContent" slot="prepend">合同内容介绍</template>
          </el-input>
        </el-col>
      </el-row>
      <br>
      <div style="display: flex; align-items: center;">
        <div class="blue-bar"></div>
        <div class="custom-title">签订各方信息：</div>
        <!--  <div style="width: 10px; height: 2.5em; background-color: cornflowerblue; margin-right: 5px;"></div>
        <div style="text-align: left; font-size: 17px; font-weight: bold;color:#5a5e66; margin-bottom: 10px; font-family: 'Microsoft YaHei', Arial, sans-serif;">签订各方信息:</div>-->
      </div>
      <el-row :gutter="10" style="display: flex;margin-left: 80px;">
        <el-col :span="12">
          <span>甲方：</span>
          <el-input v-model="contractDetail.partA" placeholder="请输入甲方信息" disabled style="width: calc(93% - 70px); margin-left: 3px;"></el-input>
        </el-col>
        <el-col :span="12">
        </el-col>
      </el-row>
      <br>
      <el-row :gutter="10" style="display: flex;margin-left: 35px;">
        <el-col :span="12" style="display: flex; align-items: center;">
          <span style="margin-right: 8px;">法定代表人：</span>
          <el-input v-model="contractDetail.alegal" placeholder="请输入法定代表人" disabled style="width: 70%; margin-left: -6px;"></el-input>
        </el-col>
        <el-col :span="12" style="display: flex; align-items: center;">
          <span style="text-indent: 20px;">电话：</span>
          <el-input v-model="contractDetail.aphone" placeholder="请输入电话" disabled style="width: 70%; margin-left: 5px;"></el-input>
        </el-col>
      </el-row>
      <br>
      <el-row :gutter="10" style="display: flex;margin-left: 80px;">
        <el-col :span="12" style="display: flex; align-items: center;">
          <span style="margin-right: 10px;">地址：</span>
          <el-input v-model="contractDetail.alocation" placeholder="请输入地址" disabled style="width: 74%; margin-left: -7px;"></el-input>
        </el-col>
        <el-col :span="12" style="display: flex; align-items: center;">
          <span style="margin-right: 10px;">邮箱：</span>
          <el-input v-model="contractDetail.aemail" placeholder="请输入邮箱" disabled style="width: 74%; margin-left: -6px;"></el-input>
        </el-col>
      </el-row>
      <br>
      <el-row :gutter="10" style="display: flex;margin-left: 80px;">
        <el-col :span="12" style="display: flex; align-items: center;">
          <span style="margin-right: 10px;white-space: nowrap">乙方：</span>
          <el-input v-model="contractDetail.partB" placeholder="请输入乙方信息" disabled style="width: 74%; margin-left: -7px;"></el-input>
        </el-col>
        <el-col :span="12"></el-col>
      </el-row>
      <br>
      <el-row :gutter="10" style="display: flex;margin-left:35px;">
        <el-col :span="12" style="display: flex; align-items: center;">
          <span style="margin-right: 10px;">法定代表人：</span>
          <el-input v-model="contractDetail.blegal" placeholder="请输入法定代表人" disabled style="width:70%; margin-left: -8px;"></el-input>
        </el-col>
        <el-col :span="12" style="display: flex; align-items: center;">
          <span style="text-indent: 25px;">电话：</span>
          <el-input v-model="contractDetail.bphone" placeholder="请输入电话" disabled style="width:70%; margin-left: 4px;"></el-input>
        </el-col>
      </el-row>
      <br>
      <el-row :gutter="10" style="display: flex;margin-left: 60px;">
        <el-col :span="12" style="display: flex; align-items: center;">
          <span style="text-indent: 20px;">地址：</span>
          <el-input v-model="contractDetail.blocation" placeholder="请输入地址" disabled style="width: 72%; margin-left: 2px;"></el-input>
        </el-col>
        <el-col :span="12" style="display: flex; align-items: center;">
          <span style="text-indent: 14px;">邮箱：</span>
          <el-input v-model="contractDetail.bemail" placeholder="请输入邮箱" disabled style="width: 73%; margin-left:2px;"></el-input>
        </el-col>
      </el-row>
      <br>
      <div style="display: flex; align-items: center;">
        <div class="blue-bar"></div>
        <div class="custom-title">收款账户信息：</div>
        <!-- <div style="width: 10px; height: 2.5em; background-color: cornflowerblue; margin-right: 5px;"></div>
       <div style="text-align: left; font-size: 17px; font-weight: bold;color:#5a5e66; margin-bottom: 10px; font-family: 'Microsoft YaHei', Arial, sans-serif;">收款账户信息:</div>-->
      </div>
      <el-row :gutter="10" style="display: flex;margin-left: 20px;">
        <el-col :span="16" style="display: flex; align-items: center;">
          <span style="margin-right: 10px;">收款账户名称：</span>
          <el-input v-model="contractDetail.payeeAccount" placeholder="请输入收款账户名称" disabled style="width: 50%; margin-left: -5px;"></el-input>
        </el-col>
        <el-col :span="8"></el-col>
      </el-row>
      <br>
      <el-row :gutter="10" style="display: flex;margin-left: 50px;">
        <el-col :span="12" style="display: flex; align-items: center;">
          <span style="margin-right: 10px;">开户银行：</span>
          <el-input v-model="contractDetail.openingBank" placeholder="请输入开户银行" disabled style="width: 70%; margin-left: -5px;"></el-input>
        </el-col>
        <el-col :span="12" style="display: flex; align-items: center;">
          <span style="margin-right: 10px;">银行账号：</span>
          <el-input v-model="contractDetail.bankAccount" placeholder="请输入银行账号" disabled style="width: 70%; margin-left: -5px;"></el-input>
        </el-col>
      </el-row>
      <br>
      <div style="margin: 0px;margin-bottom: 20px">
        <div style="display: flex; align-items: center;">
          <div class="blue-bar"></div>
          <div class="custom-title">里程碑：</div>
          <!--<div style="width: 10px; height: 2.5em; background-color: cornflowerblue; margin-right: 5px;padding-top: 10px"></div>
          <div style="text-align: left; font-size: 17px; font-weight: bold;color:#5a5e66; margin-bottom: 10px; font-family: 'Microsoft YaHei', Arial, sans-serif;">里程碑:</div>-->
        </div>
        <el-table :data="lcbList" style="margin-top: 10px">
          <el-table-column label="里程碑" prop="event" />
          <el-table-column label="里程碑时间" prop="date" style="padding-left: 50px;"/>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width" style="padding-left: 50px;">
            <template #default="scope">
              <!--            <el-button link type="primary" icon="Edit" @click="handleUpdate2(scope.row)">修改</el-button>-->
              <!--            <el-button link type="primary" icon="Delete" @click="handleDelete2(scope.row)">删除</el-button>-->
            </template>
          </el-table-column>
        </el-table>
        <pagination
            v-show="total2>0"
            :total="total2"
            v-model:page="queryParamslcb.pageNum"
            v-model:limit="queryParamslcb.pageSize"
            @pagination="getLCBList"
        />
      </div>
      <div style="margin: 0px;margin-bottom: 20px">
        <div style="display: flex; align-items: center;">
          <div class="blue-bar"></div>
          <div class="custom-title">合同支付计划：</div>
          <!-- <div style="width: 10px; height: 2.5em; background-color: cornflowerblue; margin-right: 5px;"></div>
         <div style="text-align: left; font-size: 17px; font-weight: bold;color:#5a5e66; margin-bottom: 10px; font-family: 'Microsoft YaHei', Arial, sans-serif;">合同支付计划:</div>  -->
        </div>
        <el-table :data="zfList" style="margin-top: 10px;">
          <el-table-column label="期数" type="index" width="55"/>
          <el-table-column label="计划支付日期" prop="paymentDate"/>
          <el-table-column label="计划支付金额" prop="paymentPrice">
            <template #default="scope">
              {{scope.row.paymentPrice/100}}
            </template>
          </el-table-column>
          <el-table-column label="支付比例">
            <template #default="scope">
              {{(scope.row.paymentPrice/contractDetail.totalAmount*10000).toFixed(2)}}%
            </template>
          </el-table-column>
          <el-table-column label="收款人" prop="payee"/>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template #default="scope">
              <!--            <el-button link type="primary" icon="Edit" @click="handleUpdate3(scope.row)" >修改</el-button>-->
              <!--            <el-button link type="primary" icon="Delete" @click="handleDelete3(scope.row)" >删除</el-button>-->
            </template>
          </el-table-column>
        </el-table>
        <span v-if="limitAmount" style="color: red;font-size: 16px">警告：计划支付总额大于合同金额，请进行修改！</span>
        <pagination
            v-show="total3>0"
            :total="total3"
            v-model:page="queryParamszf.pageNum"
            v-model:limit="queryParamszf.pageSize"
            @pagination="getZFList"
        />
      </div>

      <div class="descriptions-with-bar">
        <div class="blue-bar"></div>
        <div class="custom-title">附件信息：</div>
        <el-descriptions style="margin: 0; padding: 0;padding-top: 15px;">
          <el-descriptions-item label="合同文件：" >
            <el-button type="primary" :disabled="contractDetail.contractDocuments == null" @click="download(contractDetail.contractDocuments)">下载</el-button>
            <el-button type="success" :disabled="contractDetail.contractDocuments == null" @click="showFile(contractDetail.contractDocuments)">查看</el-button>
          </el-descriptions-item>
          <el-descriptions-item label="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;补充合同文件：" >
            <el-button type="primary" :disabled="contractDetail.supplementaryDocuments == null" @click="download(contractDetail.supplementaryDocuments)">下载</el-button>
            <el-button type="success" :disabled="contractDetail.supplementaryDocuments == null" @click="showFile(contractDetail.supplementaryDocuments)">查看</el-button>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-dialog>
  </div>
</template>


<script setup>


//合同表单
import '@vue-office/docx/lib/index.css'
import '@vue-office/excel/lib/index.css'

import {checkName, deleteOne, getContract, listContract, submitform1, updateForm1} from "@/api/contract/contract.js";
import {parseTime} from "@/utils/ruoyi.js";
import {addMilestone, delMilestone, getMilestone, listMilestone, updateMilestone} from "@/api/contract/lcb.js";
import {addCollection, delCollection, getCollection, listCollection, updateCollection} from "@/api/contract/payment.js";
import {ElMessage, ElMessageBox} from "element-plus";
import request from "@/utils/request.js";
import VueOfficePdf from "@vue-office/pdf";
import VueOfficeDocx from "@vue-office/docx";
import VueOfficeExcel from "@vue-office/excel";

const addFormRef=ref();
//合同列表
const contractList=ref([]);
//总数
const total = ref(0);

//校验规则
const checkStartDate=(rule, value, callback)=>{
  if (Date.parse(value)<Date.parse(addForm.value.signingTime)){
    callback(new Error("履约开始时间必须晚于合同签订时间"));
  }else {
    callback();
  }
}
const checkFinishDate=(rule, value, callback)=>{
  if (Date.parse(value)<Date.parse(addForm.value.startDate)){
    callback(new Error("履约结束时间必须晚于履约开始时间"));
  }else {
    callback();
  }
}

//数据
const data = reactive({
  addForm: {
  },
  lcbForm:{
  },
  zfForm:{
  },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    projectName:null,
    contractName:null,
    signStartDate:null,
    signEndDate:null
  },
  af1Rules:{
    contractCode: [
      { required: true, message: '请填写合同编号', trigger: 'blur' }
    ],
    contractName:[
      { required: true, message: '请填写合同名称', trigger: 'blur' }
    ],
    signingTime: [
      { required: true, message: '请填写签订时间', trigger: 'blur' }
    ],
    startDate:[
      { required: true, message: '请填写履约开始日期', trigger: 'blur' },
      { validator: checkStartDate,trigger: 'blur' }
    ],
    finishDate:[
      { required: true, message: '请填写履约结束日期', trigger: 'blur' },
      { validator: checkFinishDate,trigger: 'blur' }
    ],
    contractContent:[
      { required: true, message: '请填写合同主要内容', trigger: 'blur' }
    ],
    totalAmount:[
        { required: true, message: '请填写合同金额', trigger: 'blur' }
    ],
    contractNumber:[
      { required: true, message: '请填写合同份数', trigger: 'blur' }
    ]
  },
  af3Rules:{
    // payeeAccount: [
    //   { required: true, message: '请填写收款账户名称', trigger: 'blur' }
    // ],
    // openingBank: [
    //   { required: true, message: '请填写开户银行', trigger: 'blur' }
    // ],
    // bankAccount: [
    //   { required: true, message: '请填写银行账号', trigger: 'blur' }
    // ]
  },
  queryParamslcb:{
    pageNum: 1,
    pageSize: 4,
  },
  queryParamszf:{
    pageNum: 1,
    pageSize: 4,
  }
});



const date=ref([]);
//搜索
function handleQuery(){
  getList();
}
function resetQuery(){
  queryParams.value= {
    pageNum: 1,
    pageSize: 10,
    projectName:null,
    contractName:null,
    startDate:null,
    endDate:null
  }
  date.value=null;
  getList();
}

const { queryParams, addForm, af1Rules,af3Rules,queryParamslcb,queryParamszf,lcbForm,zfForm } = toRefs(data);
const af2Rules=ref();
set2Rules();
//表单约束

//定义支付比例
const paymentRatio = ref();

//watch监听属性值
watch(paymentRatio, (newVal) => {
  if (newVal !== null) {
    zfForm.value.paymentPrice = parseInt(addForm.value.totalAmount * newVal/100)/10000;
  }
});

function handleAdd(){
  openadd1.value=true;
  addForm.value={patent:0,article:0,scientificOffice:0,instituteOffice:0,record:0};
  lcbList.value=[];
  zfList.value=[];
  f1.value=[];
  f2.value=[];
}
function set2Rules(){
  af2Rules.value={
    partA: [
      { required: true, message: '请填写甲方', trigger: 'blur' }
    ],
        alegal: [
      { required: true, message: '请填写甲方法定代表人', trigger: 'blur' }
    ],
        aphone: [
      { required: true, message: '请填写甲方联系方式', trigger: 'blur' }
    ],
        alocation: [
      { required: true, message: '请填写甲方地址', trigger: 'blur' }
    ],
        aemail: [
      { required: true, message: '请填写甲方邮箱', trigger: 'blur' }
    ],
        partB: [
      { required: true, message: '请填写乙方', trigger: 'blur' }
    ],
        blegal: [
      { required: true, message: '请填写乙方法定代表人', trigger: 'blur' }
    ],
        bphone: [
      { required: true, message: '请填写乙方联系方式', trigger: 'blur' }
    ],
        blocation: [
      { required: true, message: '请填写乙方地址', trigger: 'blur' }
    ],
        bemail: [
      { required: true, message: '请填写乙方邮箱', trigger: 'blur' }
    ],
  }
}
//添加表单一操作
const openadd1=ref(false);

async function toStep2(f){
  if (!f)
    return;
  await f.validate((valid, fields) => {
    if (valid) {
        checkName(addForm.value.contractCode).then(res=>{
          if (addForm.value.projectId == undefined){
            if (res.data==0){
              //验证通过
              openadd1.value=false;
              openadd2.value=true;
              set2Rules()
            }else{
              ElMessage({message:"合同编号重复！",type:"error"})
            }
          }else {
            if (res.data==1){
              //验证通过
              openadd1.value=false;
              openadd2.value=true;
              set2Rules()
            }else{
              ElMessage({message:"合同编号重复！",type:"error"})
            }
          }
        })
    } else {
      console.log('error submit!', fields)
    }
  })
}
function cancelAddForm1(){
  openadd1.value=false;
  reset();
}
function reset() {
  addForm.value = {
    contractCode: null,
    contractName:null,
    signingTime:null,
    signingLocation:null,
    startDate:null,
    finishDate:null,
    totalAmount:null,
  };
  proxy.resetForm("addFormRef");
}
//添加表二操作
const openadd2=ref(false);

function cancelAddForm2(){
  openadd2.value=false;
  reset();
}

async function toStep3(f){
  if (!f)
    return;
  await f.validate((valid, fields) => {
    if (valid) {
      //验证通过
      if (addForm.value.contractDocuments != null)
        f1.value=[{name:addForm.value.contractDocuments.slice(addForm.value.contractDocuments.lastIndexOf('/'))}]
      if (addForm.value.supplementaryDocuments != null)
      f2.value=[{name:addForm.value.supplementaryDocuments.slice(addForm.value.supplementaryDocuments.lastIndexOf('/'))}]
      openadd2.value=false;
      openadd3.value=true;
    } else {
      console.log('error submit!', fields)
    }
  })
}
//添加表三操作
const openadd3=ref(false);

function backtoStep1(){
  openadd2.value=false;
  openadd1.value=true;
  af2Rules.value={};
}
function cancelAddForm3(){
  openadd3.value=false;
  reset();
}
async function toStep4(f){
  if (!f)
    return;
  await f.validate((valid, fields) => {
    if (valid) {
      //验证通过
      let a=''+addForm.value.totalAmount;
      addForm.value.totalAmount=parseFloat((a*10000).toFixed(4))
      // addForm.value.totalAmount=parseInt(addForm.value.totalAmount)
      if (addForm.value.projectId == undefined){
        submitform1(addForm.value).then(res=>{
          if (res.code==200){
            projectId=res.data;
            openadd3.value=false;
            openadd4.value=true;
          }
        })
      }else {
        updateForm1(addForm.value).then(res=>{
          projectId=res.data;
          openadd3.value=false;
          openadd4.value=true;
          getLCBList();
          getZFList();
        })
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}
//添加表单四操作
const openadd4=ref(false);
var projectId;

function backtoStep2(){
  openadd3.value=false;
  openadd2.value=true;
}

//里程碑表
const lcbList=ref([]);
const total2=ref(0);
const openLcb=ref(false);

function handleAdd2(){
  lcbReset();
  openLcb.value=true;
}

function handleUpdate2(id){
  getMilestone(id).then(res=>{
    lcbForm.value=res.data;
    openLcb.value=true;
  })
}
function submit2(){
  lcbForm.value.projectId=projectId;
  if (lcbForm.value.id != undefined){
    updateMilestone(lcbForm.value).then(res=>{
      getLCBList();
      openLcb.value=false;
    })
  }else{
    addMilestone(lcbForm.value).then(res=>{
      getLCBList();
      openLcb.value=false;
    })
  }
  lcbReset();
}

function handleDelete2(id){
  delMilestone(id).then(res=>{
    getLCBList();
  })
}
function getLCBList(){
  queryParamslcb.value.projectId=projectId;
  listMilestone(queryParamslcb.value).then(res=>{
    lcbList.value=res.rows;
    total2.value=res.total;
  })
}
function cancelLcb(){
  openLcb.value=false;
  lcbReset();
}
function lcbReset(){
  lcbForm.value={}
}
//支付计划表
const zfList=ref([]);
const total3=ref(0);
const openZf=ref(false);
function handleAdd3(){
  zfReset();
  openZf.value=true;
}
function submit3(){
  zfForm.value.projectId=projectId;
  zfForm.value.paymentPrice=(zfForm.value.paymentPrice*100).toFixed(4);
  zfForm.value.paymentPrice=parseInt(zfForm.value.paymentPrice);
  if (zfForm.value.paymentId != undefined){
    updateCollection(zfForm.value).then(res=>{
      if (res.code==200){
        getZFList();
        openZf.value=false;
      }
    }).catch(()=>{
      openZf.value=false;
    })
  }else{
    addCollection(zfForm.value).then(res=>{
      if (res.code==200){
        getZFList();
        openZf.value=false;
      }
    }).catch(()=>{
      openZf.value=false;
    })
  }
  zfReset();
  paymentRatio.value = null; // 重置 paymentRatio 的值
}
function handleUpdate3(id){
  getCollection(id).then(res=>{
    openZf.value=true;
    zfForm.value=res.data;
  })
}
function handleDelete3(id){
  delCollection(id).then(res=>{
    getZFList();
  })
}

const limitAmount=ref(false);
function getZFList(){
  limitAmount.value=false;
  queryParamszf.value.projectId=projectId;
  listCollection(queryParamszf.value).then(res=>{
    zfList.value=res.rows;
    if (contractDetail.value != null){
      let sum=0;
      for (var i of res.rows){
        sum+=i.paymentPrice;
      }
      if (contractDetail.value.totalAmount<sum){
        limitAmount.value=true;
      }
    }
    total3.value=res.total;
  })
}
function cancelZf(){
  openZf.value=false;
  zfReset();
}
function zfReset(){
  zfForm.value={}
}

function cancelAddForm4(){
  openadd4.value=false;
  reset();
}
function submit(){
  openadd4.value=false;
  getList();
}



//获取列表
function getList(){
  listContract(queryParams.value).then(res=>{
    total.value=res.total;
    contractList.value=res.rows;
  })
}
const openView=ref(false);
const contractDetail=ref(null);
function look(id){
  projectId=id;
  getZFList();
  getLCBList();
  getContract(id).then(res=>{
    contractDetail.value=res.data;
    contractDetail.value.realTotalAmount=contractDetail.value.totalAmount/10000;
    openView.value=true;
  })
}
function change(id){
  projectId=id;
  getContract(id).then(res=>{
    res.data.totalAmount=res.data.totalAmount/10000;
    addForm.value=res.data;
    openadd1.value=true;
  })
}
function remove(id){
  ElMessageBox.confirm(
      '确定要删除该合同吗?',
      '提醒',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    deleteOne(id).then(res=>{
      getList();
    })
  }).catch(() => {
  })
}

//文件上传下载
const baseurl=import.meta.env.VITE_APP_BASE_API;
function download(filename){
  request({
    url:'/common/download?fileName='+filename,
    method:'get',
    responseType:'blob'
  }).then(async res=>{
    const blob = new Blob([res], { type: 'application/'+filename.slice(filename.lastIndexOf('.')+1) });  // 此处文件类型为pdf
    saveAs(blob, filename.slice(filename.lastIndexOf('/')+1,filename.lastIndexOf('_'))+filename.slice(filename.lastIndexOf('.')));
  })
}
function saveAs(blob, filename) {
  let aLink = document.createElement('a');
  // let evt = document.createEvent('HTMLEvents');
  // evt.initEvent('click', true, true); // initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
  aLink.download = filename;
  aLink.href = window.URL.createObjectURL(blob);
  aLink.click();
}
const f1=ref([]);
function upload1(res){
  addForm.value.contractDocuments=res.fileName;
}
const f2=ref([]);
function upload2(res){
  addForm.value.supplementaryDocuments=res.fileName;
}

//文件在线阅览
const openShowFile=ref(false);
const file=ref(null);
const fileType=ref(null);

function showFile(f){
  // file.value='http://localhost:8080'+baseurl+'/common/download?fileName='+f;
  file.value=baseurl+'/common/download?fileName='+f;
  fileType.value=f.slice(f.lastIndexOf('.')+1);
  openShowFile.value=true;
}



getList();

const warchQueryDate =watch(date,(newVal)=>{
  if (newVal==null){
    queryParams.value.signStartDate=null;
    queryParams.value.signEndDate=null;
    return;
  }
  if (newVal.length==2){
    queryParams.value.signStartDate=newVal[0];
    queryParams.value.signEndDate=newVal[1];
  }
})

</script>


<style scoped lang="scss">

</style>
